<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <router-link
                v-perms="['user.group/saveGroup']"
                :to="{path: getRoutePath('user.group/groupInfo')}"
            >
            </router-link>
            <div class="mb-2.5">
                <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="120px">
                    <el-form-item label="创建时间" class="piker">
                        <el-date-picker
                            v-model="queryParams.date"
                            type="date"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            placeholder="请选择日期"
                        />
                    </el-form-item>
                    <el-form-item label="日期类型" v-if="activeName == 'three'">
                        <el-select class="w-[240px]" v-model="queryParams.date_type">
                            <el-option label="历史" :value="0"/>
                            <el-option label="今日" :value="1"/>
                            <el-option label="昨日" :value="2"/>
                            <el-option label="本周" :value="3"/>
                            <el-option label="上周" :value="4"/>
                            <el-option label="本月" :value="5"/>
                            <el-option label="上月" :value="6"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市ID"  v-if="activeName == 'three'">
                        <el-select-v2
                            v-model="queryParams.city_id"
                            filterable
                            clearable
                            :options="optionCity"
                            placeholder="请选择"
                            class="w-[240px]"
                            :height="280"
                        />
                    </el-form-item>
                    <el-form-item label="成为代理人时间" class="piker"  v-if="activeName == 'three'">
                        <el-date-picker
                            v-model="queryParams.create_time"
                            type="date"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            placeholder="请选择日期"
                        />
                    </el-form-item>
                    <el-form-item label="账户"  v-if="activeName == 'three'">
                        <el-input
                            class="w-[240px]"
                            v-model="queryParams.account"
                            clearable
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="setList">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange" >
                
                <el-tab-pane label="拉新看板" name="first">
                    <el-table size="large" v-loading="first_loading" :data="lists">
                        <el-table-column label="名称" min-width="100" prop="name"/>
                        <el-table-column label="渠道" min-width="100" prop="channel"/>
                        <el-table-column label="来源" min-width="100" prop="from"/>
                        <el-table-column label="注册新用户数" min-width="140" prop="total_reg"/>
                        <el-table-column label="实名用户数" min-width="140" prop="real_identify_total"/>
                        <el-table-column label="L7注册留存率" min-width="140" prop="l7"/>
                        <el-table-column label="L15注册留存率" min-width="140" prop="l15"/>
                        <el-table-column label="L30注册留存率" min-width="140" prop="l30"/>
                        <el-table-column label="L7实名留存率" min-width="140" prop="identifyl7"/>
                        <el-table-column label="L15实名留存率" min-width="140" prop="identifyl15"/>
                        <el-table-column label="L30实名留存率" min-width="140" prop="identifyl30"/>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="邀约看板" name="two">
                    <el-table size="large" :data="two_list">
                        <el-table-column label="名称" min-width="160" prop="name"/>
                        <el-table-column label="总代理人数" min-width="160" prop="total_agent"/>
                        <el-table-column label="新增代理人数" min-width="160" prop="add_agent"/>
                        <el-table-column label="裂变新增代理数" min-width="160" prop="agent_add_agent"/>
                        <el-table-column label="自然新增代理数" min-width="160" prop="own_add_agent"/>
                        <el-table-column label="参与邀约代理数" min-width="160" prop="join_agent"/>
                        <el-table-column label="裂变用户数" min-width="160" prop="total_user"/>
                        <el-table-column label="实名用户数" min-width="160" prop="real_identify_total"/>
                        <el-table-column label="未实名用户数" min-width="160" prop="not_real_identify_total"/>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="代理人列表" name="three">
                    <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                        <el-table-column label="日期" min-width="160" prop="date"/>
                        <el-table-column label="代理人昵称" min-width="160" prop="username"/>
                        <el-table-column label="代理人账号" min-width="160" prop="account"/>
                        <el-table-column label="等级" min-width="160" prop="level">
                            <template #default="{ row }">
                                <span v-if="row.level == 1">银牌代理人</span>
                                <span v-if="row.level == 2">金牌代理人</span>
                                <span v-if="row.level == 3">城市合伙人</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="城市" min-width="160" prop="city_name"/>
                        <el-table-column label="上级名称" min-width="180" prop="from_username">
                            <template #default="{row}">
                                <span v-if="row.from_username">{{ row.from_username }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="上级手机号" min-width="180" prop="from_account">
                            <template #default="{row}">
                                <span v-if="row.from_account">{{ row.from_account }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="成为代理人时间" min-width="160" prop="create_time"/>
                        <el-table-column label="用户身份" min-width="160" prop="user_type_name"/>
                        <el-table-column label="来源" min-width="160" prop="from"/>
                        <el-table-column label="直邀用户数" min-width="160" prop="invite_user" sortable/>
                        <el-table-column label="实名用户数" min-width="160" prop="real_identify_user" sortable/>
                        <el-table-column label="直邀渠道数" min-width="160" prop="invite_channel" sortable/>
                        <el-table-column label="间邀用户数" min-width="160" prop="indirect_user_count" sortable/>
                        <el-table-column label="累计收益" min-width="160" prop="sum_price"/>
                        <el-table-column label="提现金额" min-width="160" prop="withdraw_price"/>
                        <el-table-column label="剩余金额" min-width="160" prop="s_money"/>
                    </el-table>
                    <div class="flex justify-end mt-4">
                        <pagination v-model="pager" @change="getLists" />
                    </div>
                </el-tab-pane>
               
            </el-tabs>
            
        </el-card>
    </div>
</template>
<script lang="ts" setup name="group">
import {newUserStatistics, agentStatistics, agentDayStatistics} from '@/api/agent'
import { getRoutePath } from '@/router'
import { usePaging } from '@/hooks/usePaging'
import useAppStore from '@/stores/modules/app'
const useApp = useAppStore()
const optionCity:any = useApp.optionCity;
const queryParams = reactive({
    date: '',
    date_type: '',
    city_id: '',
    create_time: '',
    account: ''
})

const activeName = ref('first')
const first_loading = ref(true);
const lists:any = ref([])
const getListsF = async () => {
    first_loading.value = true;
    const res = await newUserStatistics(queryParams)
    lists.value = res;
    first_loading.value = false;
}
getListsF()

const two_list:any = ref([])
const getTwoLists = async () => {
    const res = await agentStatistics(queryParams)
    two_list.value = res;
}
getTwoLists()

// const three_list:any = ref([])
// const getThreeLists = async () => {
//     const res = await agentDayStatistics({})
//     console.log(res)
//     three_list.value = res;
// }
// getThreeLists()

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: agentDayStatistics,
    params: queryParams
})
getLists()

const handleChange = (val:any) => {
    console.log(val)
    queryParams.date = '';
    queryParams.date_type = '';
    queryParams.city_id = '';
    queryParams.create_time = '';
    if (val == 'first') {
        getListsF()
    }
    if (val == 'two') {
        getTwoLists()
    }
    if (val == 'three') {
        getLists()
    }
}

const setList = () => {
    console.log(activeName.value)
    if (activeName.value == 'first') {
        getListsF()
    }
    if (activeName.value == 'two') {
        getTwoLists()
    }
    if (activeName.value == 'three') {
        resetPage()
    }
}
const reset = () => {
    queryParams.date = '';
    queryParams.date_type = '';
    queryParams.city_id = '';
    queryParams.create_time = '';
    if (activeName.value == 'first') {
        getListsF()
    }
    if (activeName.value == 'two') {
        getTwoLists()
    }
    if (activeName.value == 'three') {
        resetParams()
    }
}


</script>
<style scoped lang="scss">
.piker{
    width: 360px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
</style>